<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="订单详情"></u-navbar> -->
		<view style=" background-color:#EFEDE9;">
			<view class="pl-3 pr-2 font-14 lineHight-40 font-weight-bold">服务信息</view>
		</view>
		<u-form>
			<u-field v-model="newlist.orderStateText" :border-bottom="false" label="订单状态" :disabled="true"
				input-align="right" :field-style="placeholderStyles">
			</u-field>
			<u-field v-model="newlist.upperEnterpriseName" :border-bottom="false" label="上游服务商" label-width="140"
				:disabled="true" input-align="right" :field-style="placeholderStyle"></u-field>

			<u-field v-model="newlist.productServeName" :border-bottom="false" label="订单/服务名称" label-width="180"
				:disabled="true" input-align="right" :field-style="placeholderStyle"></u-field>

			<u-field v-model="newlist.serviceName" :border-bottom="false" :disabled="true" label="服务商名称"
				label-width="140" input-align="right" :field-style="placeholderStyle"></u-field>

			<!-- 	<u-field v-model="newlist.serviceIntroduce" :border-bottom="false" :disabled="true" label-width="180"
			label="服务介绍" input-align="right" :field-style="placeholderStyle"></u-field> -->
			<u-form-item style="padding-left: 15px; padding-right: 20px;" :border-bottom="false" :disabled="true" label="服务介绍" label-width="140" input-align="right"
				:field-style="placeholderStyle">
				<u-input type="textarea" :disabled="true"  v-model="newlist.serviceIntroduce" input-align="right" />
			</u-form-item>
             <view class="text-right text-BEBFE8 pr-3">({{ wordCount }} / {{maxCharacters }})</view>
			<u-form-item style="padding-left: 15px; padding-right: 20px;" :border-bottom="false" label-width="230" label="服务介绍详情">
				<view style=" display: flex; flex-wrap: wrap;">
					<img v-for="(img, index) in images" :key="index" :src="getFullImageUrl(img)"
						style="width: 90px; height: 90px; margin: 5px;" @click="previewImage(index)" mode=""></img>
				</view>
			</u-form-item>
			<u-field v-model="newlist.servicePrice" :border-bottom="false" :disabled="true" label-width="180"
				label="服务价格(元)" input-align="right" :field-style="placeholderStyle"></u-field>
			<!-- <u-field v-model="newlist.serviceFlow" :border-bottom="false" :disabled="true" label="服务流程" input-align="right"
			:field-style="placeholderStyle"></u-field>
		<u-field v-model="newlist.serviceInform" :border-bottom="false" :disabled="true" label="服务售后" input-align="right"
			:field-style="placeholderStyle"></u-field> -->
			<view style=" background-color:#EFEDE9;">
				<view class="pl-3 pr-2 font-14 lineHight-40 font-weight-bold">我的信息</view>
			</view>
			<u-field v-model="newlist.agricultureEnterpriseName" :border-bottom="false" :disabled="true" label="涉农企业"
				input-align="right" :field-style="placeholderStyle"></u-field>
			<u-field v-model="newlist.phone" :border-bottom="false" :disabled="true" label="联系方式" input-align="right"
				:field-style="placeholderStyle"></u-field>
			<view style=" background-color:#EFEDE9;">
				<view class="pl-3 pr-2 font-14 lineHight-40 font-weight-bold">订单信息</view>
			</view>
			<u-field v-model="newlist.orderNumber" :border-bottom="false" :disabled="true" label-width="160"
				label="订单编号" input-align="right" :field-style="placeholderStyle"></u-field>

			<u-field v-model="formattedOrderTime" :border-bottom="false" :disabled="true" label="订单时间"
				input-align="right" :field-style="placeholderStyle"></u-field>
			<u-field v-model="newlist.orderSchedule" :border-bottom="false" :disabled="true" label-width="160"
				label="订单进度	" input-align="right" :field-style="placeholderStyle"></u-field>

			<u-field v-model="newlist.orderEvaluation" :border-bottom="false" :disabled="true" label="订单评价"
				input-align="right" :field-style="placeholderStyle"></u-field>
		</u-form>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import ferrButton from "@/components/free-ui/ferr-button.vue";
	import {
		getImageUrl
	} from '@/common/free-lib/util.js';
	export default {
		components: {
			ferrButton,
		},
		data() {
			return {

				newlist: [],
				placeholderStyle: {
					color: '#999'
				},
				placeholderStyles: {
					color: '#FFC251'
				},
				images:[],
				maxCharacters: 200 
			}
		},
		onLoad(options) {
			const id = options.id;
			this.NewListDetail(id)
		},
		computed: {
			formattedOrderTime() {
			    if (!this.newlist.orderTime) return '';
			    return this.newlist.orderTime.split(' ')[0];
			},
			
			wordCount() {
				// 安全性检查，避免访问未定义的属性
				if (this.newlist.serviceIntroduce && typeof this.newlist.serviceIntroduce === 'string') {
					return this.newlist.serviceIntroduce.length;
				} else {
					return 0;
				}
			}	
		},
		methods: {
			getFullImageUrl(imagePath) {
				return getImageUrl(imagePath);
			},
			previewImage(index) {
				uni.previewImage({
					urls: this.images.map(img => this.getFullImageUrl(img)), 
					current: this.getFullImageUrl(this.images[index]) 
				});
			},
			NewListDetail(id) {
				$H.get('/upper/upperMarketOrder/queryById', {
					id: id
				}, {}).then(res => {
					this.newlist = res.result
					if (res.result.serviceIntroductionUrl) {
						this.images = res.result.serviceIntroductionUrl.split(',');
					} else {
						this.images = [];
					}
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},

		}
	}
</script>

<style>
	
</style>